CSS CLASS NAMING CONVENTIONS:

Three categories of classes, each with its own prefix:

1. LAYOUT CLASSES (prefix: l-)
   Describe WHERE an element sits in the page structure.
   These are structural/positional, not visual.
   Examples: .l-col-1, .l-col-2, .l-sidebar, .l-callout,
             .l-header-row, .l-main-panel

2. UTILITY / ROLE CLASSES (prefix: u-)
   Describe a VISUAL TRAIT applied to an element, independent
   of what the element is or where it sits.
   Context-free; can be composed onto any element.
   Examples: .u-highlight, .u-muted, .u-bordered,
             .u-spaced-lg, .u-accent-red

3. COMPONENT CLASSES (BEM naming, no prefix)
   Name a self-contained UI widget and its internal parts.
   Format: .block__element--modifier
     - Block: standalone component (.card, .nav, .form-field)
     - Element: child part of that block (.card__title, .card__body)
     - Modifier: variant or state (.card__title--highlighted,
                 .form-field--invalid)
   Rules:
     - Flat selectors only (no descendant combinators between blocks)
     - A block is meaningful on its own; an element is not
       (a "title" means nothing without knowing it's a card's title)
     - Modifiers alter appearance/state but don't create new
       structural parts

USAGE EXAMPLE:
  <div class="card card--featured l-col-1">
    <h2 class="card__title u-highlight">Report</h2>
    <p class="card__body">...</p>
  </div>

  Here: .card is the BEM block, .card--featured is a modifier,
  .l-col-1 places it in the first column, .card__title names
  the heading within the card, and .u-highlight applies a
  highlight color regardless of which card it appears in.

